<div class="home">
  <app-wyy-carousel
    #wyyCarousel
    [currentIndex]="carouselCurrentIndex"
    (changeCarousel)="changeCarousel($event)">
    <nz-carousel
      nzAutoPlay
      nzEffect="fade"
      nzAutoPlaySpeed="5000"
      [nzDotRender]="wyyCarousel.dotRef"
      (nzBeforeChange)="carouselChanged($event)">
      <div class="carousel-item" nz-carousel-content *ngFor="let item of banners">
        <a>
          <img appImgDefault [src]="item.imageUrl" [alt]="item.targetId" />
        </a>
      </div>
    </nz-carousel>
  </app-wyy-carousel>
  <div class="main">
    <div class="wrap">
      <div class="left">
        <div class="sec">
          <div class="up">
            <div class="nav">
              <h2>
                <i></i>
                <a>热门推荐</a>
              </h2>
              <nav>
                <a *ngFor="let item of hotTags" routerLink="/sheet" [queryParams]="{'cat': item.name}">{{item.name}}</a>
              </nav>
            </div>
            <a>
              更多
              <i nz-icon type="arrow-right" nzTheme="outline" class="more_icon"></i>
            </a>
          </div>
          <div class="down">
            <div class="down-wrap">
              <app-song-sheet
                class="sheet-item"
                *ngFor="let item of songSheet"
                [sheetItem]="item"
                (onPlay)="playSongSheet($event)"
                (click)="skipToSheetInfo(item.id)"
              ></app-song-sheet>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <app-member-card [user]="user" (openModal)="showModal()"></app-member-card>
        <div class="settled-singer">
          <div class="tit"><b>入驻歌手</b></div>
          <div class="list">
            <div class="card" *ngFor="let item of singers">
              <div class="pic">
                <img appImgDefault [src]="item.picUrl" [alt]="item.name" />
              </div>
              <div class="txt">
                <div class="ellipsis">
                  <a (click)="skipSingerDetail(item.id)">{{item.name}}</a>
                </div>
                <span>专辑数：{{item.albumSize}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
